<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挂号信息详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition duration-200;
            }
            .status-badge {
                @apply px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
        }
    </style>
</head>
<body>


<main class="container mx-auto px-4 py-6">
    <div id="messageToast" class="ui success message toast-enter"
         th:unless="${#strings.isEmpty(message)}"
         style="position: relative; padding: 1.25rem 2rem; margin-bottom: 2rem;
                border-radius: 0.75rem; background-color: #ECFDF5; border-left: 4px solid #00B42A;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <i class="close icon absolute top-4 right-4 text-gray-500 cursor-pointer"></i>
        <div class="header flex items-center font-medium text-gray-800 mb-1">
            <i class="fa fa-check-circle text-success mr-2"></i>提示：
        </div>
        <p class="text-gray-700" th:text="${message}"></p>
    </div>
    <!-- 页面标题和操作按钮 -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">挂号信息详情</h2>
            <p class="text-gray-500 mt-1">ID: <span th:text="${registration?.id}">12345</span></p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-3">
            <a href="#" class="px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
                <i class="fa fa-arrow-left mr-1"></i> 返回列表
            </a>
        </div>
    </div>

    <!-- 状态卡片 -->
    <div class="bg-white rounded-xl p-6 mb-6 card-shadow">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
            <div class="flex items-center space-x-4 mb-4 md:mb-0">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <i class="fa fa-user-md text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">当前状态</h3>
                    <div class="mt-1 flex items-center">
                            <span class="status-badge"
                                  th:text="${registration?.status}">待就诊</span>
                        <span class="ml-2 text-sm text-gray-500" th:text="${#dates.format(registration?.register_time, 'yyyy-MM-dd HH:mm')}"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 患者基本信息 - 整行布局 -->
    <div class="bg-white rounded-xl p-6 mb-6 card-shadow">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
            <i class="fa fa-user-o text-primary mr-2"></i>患者基本信息
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- 姓名 -->
            <div class="flex flex-col">
                <span class="text-sm text-gray-600">姓名</span>
                <span class="font-medium mt-1" th:text="${patient?.name} ?: '暂无姓名'">张三</span>
            </div>

            <!-- 年龄 -->
            <div class="flex flex-col">
                <span class="text-sm text-gray-600">年龄</span>
                <span class="font-medium mt-1" th:text="${patient?.age} != null ? ${patient.age + '岁'} : '无数据'">35岁</span>
            </div>

            <!-- 性别 -->
            <div class="flex flex-col">
                <span class="text-sm text-gray-600">性别</span>
                <span class="font-medium mt-1" th:text="${patient?.gender} ?: '无数据'">男</span>
            </div>

            <!-- 联系电话 -->
            <div class="flex flex-col md:col-span-3">
                <span class="text-sm text-gray-600">联系电话</span>
                <span class="font-medium mt-1" th:text="${patient?.phone} ?: '暂无电话'">13800138000</span>
            </div>

            <!-- 身份证号 -->
            <div class="flex flex-col md:col-span-3">
                <span class="text-sm text-gray-600">身份证号</span>
                <span class="font-medium mt-1" th:text="${patient?.id_card} ?: '暂无身份证号'">110101199001011234</span>
            </div>
        </div>
    </div>
    <div class="mt-4 text-right">
        <a href="#" class="text-primary hover:text-primary/80 transition-colors text-sm font-medium">
            查看完整信息 <i class="fa fa-angle-right ml-1"></i>
        </a>
    </div>



    <!-- 挂号表单 - 整行布局 -->
    <div class="bg-white rounded-xl p-6 mb-6 card-shadow">
        <form id="registrationForm" th:action="@{updateRegistration}" th:object="${registration}" method="post">
            <h3 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-file-text-o text-primary mr-2"></i>挂号详情
            </h3>

            <!-- 患者信息 -->
            <div class="mb-6">
                <h4 class="font-medium text-gray-700 mb-3 pb-2 border-b border-gray-200">患者信息</h4>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <!-- 患者ID -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">患者ID</label>
                        <input type="text"
                               th:value="${registration.patient_id}"
                               readonly
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 bg-gray-50 text-gray-500" />
                    </div>

                    <!-- 挂号时间 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">挂号时间</label>
                        <input type="text"
                               th:value="${#dates.format(registration.register_time, 'yyyy-MM-dd HH:mm')}"
                               readonly
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 bg-gray-50 text-gray-500" />
                    </div>

                    <!-- 症状描述 -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">症状描述</label>
                        <textarea rows="3"
                                  readonly
                                  class="w-full px-4 py-2 rounded-lg border border-gray-300 bg-gray-50 text-gray-500"
                                  th:text="${registration.symptoms} ?: '-'">-</textarea>
                    </div>
                </div>
            </div>


            <!-- 可编辑信息 -->
            <div>
                <h4 class="font-medium text-gray-700 mb-3 pb-2 border-b border-gray-200">可编辑信息</h4>

                <!-- 隐藏字段：挂号ID -->
                <input type="hidden" name="id" th:value="${registration.id}" />
                <input type="hidden" name="patient_id" th:value="${patient?.id}" />
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- 就诊医生ID -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                就诊医生ID <span class="text-red-500">*</span>
                            </label>
                            <input type="number" name="doctor_id" required
                                   class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"
                                   placeholder="请输入医生ID">
                        </div>

                        <!-- 科室选择 -->
                        <div class="space-y-2">
                            <label for="department" class="block text-sm font-medium text-gray-700">分配科室</label>
                            <select name="department" id="department"
                                    class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus">
                                <option value="">请选择科室</option>
                                <option value="内科">内科</option>
                                <option value="外科">外科</option>
                            </select>
                        </div>

                        <!-- 内科房间号列表（默认隐藏） -->
                        <div id="internal-room-select" class="mt-4" style="display: none;">
                            <label for="internal_room" class="block text-sm font-medium text-gray-700 mb-1">内科房间号</label>
                            <select name="internal_room" id="internal_room"
                                    class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus">
                                <option value="">请选择房间号</option>
                                <option th:each="room : ${internalRooms}"
                                        th:value="${room.roomNumber}"
                                        th:text="${room.roomNumber}">
                                </option>
                            </select>
                        </div>

                        <!-- 外科房间号列表（默认隐藏） -->
                        <div id="surgery-room-select" class="mt-4" style="display: none;">
                            <label for="surgery_room" class="block text-sm font-medium text-gray-700 mb-1">外科房间号</label>
                            <select name="surgery_room" id="surgery_room"
                                    class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus">
                                <option value="">请选择房间号</option>
                                <option th:each="room : ${surgeryRooms}"
                                        th:value="${room.roomNumber}"
                                        th:text="${room.roomNumber}">
                                </option>
                            </select>
                        </div>


                        <!-- 备注 -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                            <textarea name="remark" rows="3"
                                      class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"
                                      placeholder="添加备注信息（可选）"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                就诊时间 <span class="text-red-500">*</span>
                            </label>
                            <input type="datetime-local" name="treatment_time"
                                   required
                                   class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"/>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="mt-6 flex justify-end">
                        <button type="submit"
                                class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">
                            提交
                        </button>
                    </div>
            </div>
        </form>
    </div>
</main>
<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 保存按钮悬停效果
        const saveBtn = document.getElementById('saveBtn');
        saveBtn.addEventListener('mouseenter', function() {
            this.classList.add('shadow-lg');
            this.classList.remove('shadow-md');
        });

        saveBtn.addEventListener('mouseleave', function() {
            this.classList.add('shadow-md');
            this.classList.remove('shadow-lg');
        });
    });
</script>
<script>
    $(".message .close").on('click', function () {
        $(this).closest(".message").transition("fade");
    })
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const departmentSelect = document.getElementById('department');
        const internalRoom = document.getElementById('internal-room-select');
        const surgeryRoom = document.getElementById('surgery-room-select');

        departmentSelect.addEventListener('change', function () {
            const selectedDept = this.value;

            // 先隐藏所有房间号选择
            internalRoom.style.display = 'none';
            surgeryRoom.style.display = 'none';

            // 根据科室显示对应房间号列表
            if (selectedDept === '内科') {
                internalRoom.style.display = 'block';
            } else if (selectedDept === '外科') {
                surgeryRoom.style.display = 'block';
            }
        });
    });
</script>

</body>
</html>